<template>
    <div id="wrapper">
        <current-loc :curLoc="curLoc"></current-loc>
        <div class="main cle">
            <list-nav :currentCategoryName="currentCategoryName" :cateMenu="cateMenu" :proNum="proNum" :isObject="isObject" @on-change="changeMenu"></list-nav>
            <div class="maincon">
                <price-range :priceRange="priceRange" @on-change="changePrice"></price-range>
                <list-sort @on-sort="changeSort" :proNum="proNum"></list-sort>
                <div class="list-detail">
                    <product-list  :listData="listData"></product-list>
                    <Page pre-text="上一页" next-text="下一页" end-show="false" :page="curPage" :total-page='totalPage' @pagefn="pagefn"></Page>
                </div>
            </div>
        </div>
    </div>

</template>
<script type="text/ecmascript-6">
    // 产品列表
    import productList from './product-list/productList';
    // 左侧列表导航
    import listNav from './list-nav/listNav';
    // 列表排序
    import listSort from './list-sort/listSort';
    // 翻页
    import page from './page/page';
    // 当前位置(这个有点问题)
    import currentLoc from './current-loc/current-loc';
    // 价格范围
    import priceRange from './price-range/priceRange';

    import { getCategory, getGoods } from '../../api/api'
    export default {
        data () {
            return {
                curPage: 1, // 页码
                top_category: '', // 商品种类
                listData: [],
                cateMenu: {}, //菜单列表
                isObject:true,
                ordering: '-add_time',
                proNum: 0, //商品数量
                curLoc: [], //当前位置
                priceRange: [], //价格区间
                pricemin: '', //价格最低
                pricemax: '', //价格最高
                pageType:'list',
                searchWord:'',
                currentCategoryName:''
            };
        },
        components: {
            'product-list': productList,
            'list-nav': listNav,
            'list-sort': listSort,
            'Page': page,
            'current-loc': currentLoc,
            'price-range': priceRange

        },
        props: {

        },
        created () {
            this.getAllData ();
        },
        watch: {
            "$route": "getAllData"
        },
        computed: {
            totalPage(){
                return  Math.ceil(this.proNum/12)
            }
        },
        methods: {
            getAllData () {
                console.log(this.$route.params)
                if(this.$route.params.id){
                    this.top_category = this.$route.params.id;
                    this.getMenu(this.top_category); // 获取左侧菜单列表
                }else{
                    this.getMenu(null); // 获取左侧菜单列表
                    this.pageType = 'search'
                    this.searchWord = this.$route.params.keyword;
                }

                this.getCurLoc(); // 获取当前位置
                this.getListData(); //获取产品列表
                this.getPriceRange(); // 获取价格区间
            },
            getListData() {
                if(this.pageType=='search'){
                  getGoods({
                    search: this.searchWord, //搜索关键词
                  }).then((response)=> {
                    this.listData = response.data.results;
                    this.proNum = response.data.count;
                  }).catch(function (error) {
                    console.log(error);
                  });
                }else {
                  getGoods({
                    page: this.curPage, //当前页码
                    top_category: this.top_category, //商品类型
                    ordering: this.ordering, //排序类型
                    pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间
                    pricemax: this.pricemax // 价格最高 默认为‘’
                  }).then((response)=> {

                    this.listData = response.data.results;
                    this.proNum = response.data.count;
                  }).catch(function (error) {
                    console.log(error);
                  });
                }

            },
            getMenu(id) {
                if(id != null){
                  getCategory({
                    id:this.$route.params.id
                  }).then((response)=> {
                    this.cateMenu = response.data.sub_cat;
                    this.currentCategoryName = response.data.name
                  }).catch(function (error) {
                    console.log(error);
                  });
                }else {
                  getCategory({}).then((response)=> {
                    this.cateMenu = response.data;
                    this.isObject = false
                  }).catch(function (error) {
                    console.log(error);
                  });
                }

            },

            getCurLoc () { // 当前位置
                this.$http.post('/currentLoc', {
                    params: {
                        proType: this.type, //商品类型
                    }
                }).then((response)=> {

                    this.curLoc = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getPriceRange () {
                this.$http.post('/priceRange', {
                    params: {
                        proType: this.type, //商品类型
                    }
                }).then((response)=> {

                    this.priceRange = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            changeSort (type) {

                this.ordering = type;
                this.getListData();

            },
            changePrice (data) {
                this.pricemin = data.min;
                this.pricemax = data.max;
                this.getListData();
            },
            changeMenu (id) {
                this.top_category = id; //重新获取
                this.getCurLoc();
                this.getMenu(id);
                this.getListData();
            },
            pagefn(value){//点击分页
                this.curPage = value.page;
                this.getListData()
            }
        }
}
</script>
<style  lang='scss'>
.maincon {
    width: 970px;
    float: right;
}
</style>
